<template>
    <!-- 列表商品组件 -->
    <div class="commodity_list">
        <div class="new_list_box">
            <div class="img_box">
                <!-- 商品图片 -->
                <van-image fit="cover" width="120" height="120" radius="2"
                    :src="data?.productImages ? data?.productImages + '?x-oss-process=image/resize,w_300' : ''" />
            </div>
            <div class='right_box'>
                <!-- 商品名字和状态 -->
                <div class="mz_zt_box">
                    <div class="name">{{ data?.styleName }}</div>
                    <div
                        :class="{ tag: true, tag_lan: data?.putTypeName.includes('已选'), tag_lv: data?.putTypeName.includes('还'), tag_red: data?.putTypeName.includes('超期') }">
                        {{ data?.putTypeName }}</div>
                </div>
                <!-- 卖点 -->
                <div class='md_box'>{{ data?.sellingPoints }}</div>
                <div class='name_hjh'>
                    <!-- 出库时间 -->
                    <div class="zsy_box">出库时间：{{ data?.createTime }}</div>
                </div>
                <div class="jyj_box">
                    <!-- 价格 -->
                    <div class="jgbox">
                        <span v-if="data?.hmStockMechanismsList[0].cooperationMode === '分佣'">￥{{ data?.hmStockMechanismsList[0].price
                            }}</span>
                        <span v-else>￥{{ data?.hmStockMechanismsList[0].costPrice }}</span>
                    </div>
                    <!-- 佣金 -->
                    <div class="yj_box" v-if="data?.hmStockMechanismsList[0].cooperationMode === '分佣'">
                        <div class="yj">佣</div>
                        <div class="bfb_y">{{ data?.hmStockMechanismsList[0].commission }}%</div>
                    </div>
                    <!-- 机制 -->
                    <div class='jj_box'>
                        {{ data?.hmStockMechanismsList[0].liveStreamingMechanism }}
                    </div>
                </div>
                <div class="bmkc_box">
                    <div class="kc">
                        <div class="kc_z">库存</div>
                        <div class="dsj">{{ data?.stockAvailable }}件</div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
defineProps({ data: { type: Object, default: () => { } } })
</script>

<style lang="less" scoped>
.new_list_box {
    .right_box {
        .bmkc_box {
            .dsj {
                font-size: 12px;
                color: #0094FF;
                line-height: 20px;
            }

            .kc_z {
                margin-right: 5px;
                width: 34px;
                height: 20px;
                background: #0094FF;
                border-radius: 5px;
                font-size: 12px;
                color: #FFFFFF;
                line-height: 20px;
                text-align: center;
            }

            .kc {
                display: flex;
                background: #EBF4FF;
                border-radius: 5px;
                padding-right: 5px;
            }

            .bm {
                width: 0px;
                max-width: fit-content;
                flex: 1;
                font-size: 12px;
                color: #3F68DB;
                background: #EBF4FF;
                border-radius: 5px;
                padding: 4px 5px;
                margin-right: 10px;
            }

            align-items: center;
            display: flex;
        }

        .gggcz_box {
            width: 225px;
            font-size: 12px;
            color: #8492AD;
            margin-bottom: 5px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .jyj_box {
            .jj_box {
                font-size: 12px;
                color: #FF5A1A;
                padding: 2px 5px;
                border-radius: 2px;
                border: 1px solid #FF5A1A;
                max-width: fit-content;
                width: 0;
                flex: 1;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            .yj_box {
                .bfb_y {
                    font-size: 12px;
                    color: #1B1714;
                    line-height: 16px;
                }

                .yj {
                    margin-right: 5px;
                    width: 22px;
                    height: 16px;
                    background: #1B1714;
                    border-radius: 2px;
                    text-align: center;
                    line-height: 16px;
                    font-size: 12px;
                    color: #CEA46C;
                }

                display: flex;
                margin-right:10px;
                height: 16px;
                padding-right: 5px;
                background: linear-gradient(136deg, #E9D1A5 0%, #CEA46C 100%);
                border-radius: 2px;
            }

            .jgbox {
                margin-right: 10px;
                font-size: 18px;
                color: #FC2540;
            }

            align-items: center;
            display: flex;
            margin-bottom: 3px;
        }

        .name_hjh {
            .hjh_box {
                .hhh {
                    font-weight: 500;
                    font-size: 12px;
                    color: #B5884A;
                    line-height: 20px;
                }

                .bk {
                    width: 20px;
                    height: 20px;
                    background: #B5884A;
                    border-radius: 5px;
                    font-weight: 400;
                    font-size: 12px;
                    color: #FEF6E2;
                    text-align: center;
                    line-height: 20px;
                    margin-right: 6px;
                }

                background-color: #FEF6E2;
                border-radius: 5px;
                display: flex;
                height: 20px;
                padding-right: 11px;
            }

            .zsy_box {
                span {
                    margin: 0 5px;
                }

                font-size: 12px;
                color: #B5884A;
                padding: 4px 5px;
                background: #FEF6E2;
                border-radius: 5px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                margin-right:10px;
                display: flex;
                align-items: center;
            }

            display: flex;
            margin-bottom: 3px;
            // justify-content: space-between;
        }

        .md_box {
            width: 225px;
            font-size: 12px;
            color: #8492AD;
            margin-bottom: 3px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .mz_zt_box {
            .tag_lan {
                background: #EBF4FF;
                color: #0094FF;
            }

            .tag_red {
                background: #FDE7E7;
                color: #FC2540;
            }

            .tag_lv {
                background: #E7FDEE;
                color: #19D11B;
            }

            .tag {
                width: 67px;
                height: 26px;
                line-height: 26px;
                text-align: center;
                border-radius: 2px;
                font-weight: 400;
                font-size: 14px;
            }

            .name {
                width: 144px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-weight: 600;
                font-size: 16px;
                color: #1A1B1C;
            }

            display: flex;
            justify-content: space-between;
        }

    }

    .img_box {
        .van-image {
            width: 120px !important;
            height: 120px !important;
        }

        width: 120px;
        height: 120px;
        margin-right: 10px;
    }

    display: flex;
}

@import url(../style//index.less);
</style>